
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>接口测试工具</title>
</head>
<style>
    #cqr{
        width: 100%;
        height: auto;
    }
    .form{
        width: 50%;
        height: auto;
        background: olivedrab;
        box-shadow: 0 0 100px darkblue;
        margin: 100px auto;
        border-radius: 30px;
        padding: 10px;
    }
    .form>h2{
        width: 100%;
        text-align: center;
        color: white;
    }
    .form>ul>li{
        width: 80%;
        margin: 10px 50px;
        border-radius: 5px;
        color: white;
        list-style: none;
    }
    .form>ul>li>span{
        font-size: 14px;
    }
    .form>ul>li>input{
        float: right;
        width: 80%;
    }
    .form>button{
        display: block;
        width: 20%;
        margin: auto;
    }
    .form>textarea{
        display: block;
        margin: 20px auto;
    }
</style>
<body>
<div id="cqr">
    <div class="form">
        <h2>接口测试工具</h2>
        <ul>
            <li><span>接口地址:</span><input type="text" v-model="APIaddress"></li>
            <li><span>发送数据方式:</span><input type="text" v-model="type"></li>
            <li><span>接收数据类型:</span><input type="text" v-model="dataType"></li>
            <li><span>发送数据：</span><input type="text" v-model="data"></li>
        </ul>
        <button v-on:click="submit()">测试</button>
        <textarea rows="10" cols="60">{{message}}</textarea>
    </div>
</div>
</body>
<script src="statics/js/jquery-3.3.1.min.js"></script>
<script src="statics/js/vue.js"></script>
<script>
    $(function () {
        vue.APIaddress=vue.getCookie("APIaddress");
        vue.data=vue.getCookie("data");
    })
    var vue=new Vue({
        el:'#cqr',
        data:{
            APIaddress:'',
            data:'',
            type:'POST',
            dataType:"json",
            message:''
        },
        methods:{
            submit:function () {
                vue.setCookie("APIaddress",vue.APIaddress,3);
                vue.setCookie("data",vue.data,3);
                $.ajax({
                    type:vue.type,
                    url:vue.APIaddress,
                    data:vue.data,
                    dataType:vue.dataType,
                    success:function (message) {
                        vue.message=message;
                    },
                    error:function (message) {
                        vue.message="errorFunctionPrint:"+message;
                    }
                });
            },
            getCookie:function (name) {
                var arr;
                var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg))
                    return unescape(arr[2]);
                else
                    return null;
            },
            setCookie:function (name, value, day) {
                if(day !== 0){     //当设置的时间等于0时，不设置expires属性，cookie在浏览器关闭后删除
                    var expires = day * 24 * 60 * 60 * 1000;
                    var date = new Date(+new Date()+expires);
                    document.cookie = name + "=" + escape(value) + ";expires=" + date.toUTCString();
                }else{
                    document.cookie = name + "=" + escape(value);
                }
            }
        }
    });
</script>
</html>
